<template>
    <div>
        <van-popup round v-model:show="showBottom" position="bottom" closeable :style="{ width: '100%', height: height }">
            <div class="dialog-container">
                <div class="dialog-title">{{ titleRight }}</div>
                <slot name="content"></slot>
                <slot name="footer"></slot>
            </div>
        </van-popup>
    </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue';
import { useToggle } from '@vant/use';
const [showBottom, toggle] = useToggle(false)
defineProps({
    titleRight: {
        type: String,
        default: ''
    },
    valueModel: {
        type: String,
        default: ''
    },
    height: {
        type: String,
        default: ''
    }
});

const openDialog = () => {
    toggle(true)
}
const closeDialog = () => {
    toggle(false)
}
defineExpose({
    openDialog,
    closeDialog
})
const emit = defineEmits()

</script>

<style lang="scss" scoped>
.dialog-container {
    color: #777;
    padding: 8px 10px;

    .dialog-title {
        font-size: 8px;
        font-weight: 400;

    }

    .dialog-footer {
        margin-top: 10px;
    }
}

:deep(.van-icon-cross:before) {
    color: $baseColor;
    font-size: 8px;
}

:deep(.van-cell) {
    padding: 9px 0;
}

:deep(.van-icon__image) {
    width: 12px;
    height: 12px;
}
</style>